{% extends 'base.html' %}
{% block title %}
    <title>登陆</title>
    <style type="text/css">
        body {
            background:#323542;
        }
        .verify_code_img {
            width: 100%;
            height: 100%;
        }
    </style>
{% endblock %}

{% block container %}
<div class="login-box">
    <div class="lg-title">欢迎登陆积分商城</div>
    <div class="login-form">
        <form action="{% url 'accounts:user_login' %}?next={{ next_url }}" method="POST" enctype="multipart/form-data">
            <div class="login-user-name common-div">
                <span class="eamil-icon common-icon">
                  <img src="/static/images/eamil.png" />
                </span>
                <input
                    type="text"
                    name="username"
                    value="{{ form.username.value|default_if_none:'' }}"
                    placeholder="请输入您的手机号"
                />
            </div>
            {{ form.username.errors }}
            <div class="login-user-pasw common-div">
                <span class="pasw-icon common-icon">
                  <img src="/static/images/password.png" />
                </span>
                <input
                    type="password"
                    name="password"
                    value=""
                    placeholder="请输入您的密码"
                />
            </div>
            {{ form.password.errors }}
            <!-- 验证码 -->
            <div class="login-user-vcode common-div">
                <div class="weui-cell__bd">
                    <input
                        type="text"
                        name="verify_code"
                        value=""
                        maxlength="4"
                        placeholder="请输入验证码"
                    />
                </div>
                <div class="weui-cell__ft"><img class="verify_code_img" src="{% url 'system:verify_code' %}" data-src="{% url 'system:verify_code' %}" alt="验证码"></div>
            </div>
            {{ form.verify_code.errors }}
            {{ form.non_field_errors }}
            <button class="login-btn common-div" type="submit" >登陆</button>
            <a href="javascript:;" class="login-oth-btn common-div">微信登陆</a>
            <a href="javascript:;" class="login-oth-btn common-div">QQ登陆</a>
        </form>
    </div>
    <div class="forgets">
        <a href="pwd_change.html">忘记密码？</a>
        <a href="{% url 'accounts:user_register' %}">免费注册</a>
    </div>
</div>
{% endblock %}
<!--主体-->
{% block footer %}
    <script type="text/javascript" src="/static/js/jquery.Spinner.js"></script>
    <script>
        $('.verify_code_img').click(function() {
            $(this).attr('src', $(this).attr('data-src') + '?t=' + new Date().getTime())
        })
    </script>
{% endblock %}

